<template>
    <div class="page">
        <wl-content-top :line="false">
            <template slot="body">
                <Row class="wl-content">
                    <Col span="24">
                        <div class="wl-content-group">
                            <Input v-model="sel_info" placeholder="Enter something..." style="width: 300px;margin-right: 10px"/>
                            <Button class="wl-content-button" type="primary" @click="select_info(sel_info)">查询</Button>
                            <Button type="primary"  class="wl-content-button"  @click="addCarInfo">添加</Button>
                            <Button type="primary">删除</Button>
                        </div>
                    </Col>
                    <Col span="24" class="">
                        <Table  border ref="selection" :columns="columns4.columns4Header"
                               :data="columns4.columns4Bodey" class="wl-table">
                            <template slot-scope="{ row }" slot="carNo">
                                <div style="color: #0080ff" @click="update(row)">{{ row.no }}</div>
                            </template>
                            <template slot-scope="{}" slot="action">
                                <Button type="primary" size="small" style="margin-right: 5px" @click="modal1=true">
                                    修改
                                </Button>
                            </template>
                        </Table>
                        <Modal
                                v-model="modal1"
                                title="选择企业"
                                @on-ok="ok"
                                @on-cancel="cancel">
                            <template>
                                <Tree :data="data2" show-checkbox></Tree>
                            </template>
                        </Modal>
                        <Modal
                                v-model="modal2"
                                title="编辑车辆信息"
                                @on-ok="ok"
                                @on-cancel="cancel">
                            <template>
                                <Form ref="formLeft" :model="formLeft" :label-width="100">
                                    <template>
                                        <Tabs value="name1">
                                            <TabPane label="基本信息" name="name1">
                                                <template>
                                                    <Row :gutter=20>
                                                        <Col span="12">
                                                            <FormItem label="车辆编号">
                                                                <Input v-model="formLeft.no"
                                                                       value=""></Input>
                                                            </FormItem>
                                                        </Col>
                                                        <Col span="12">
                                                            <FormItem label="所属单位">
                                                                <Input v-model="treeSelectData.name"></Input>
                                                            </FormItem>
                                                        </Col>
                                                    </Row>
                                                    <Row :gutter=20>
                                                        <Col span="12">
                                                            <FormItem label="所属行业">
                                                                <Select clearable placeholder="请选择行业" v-model="formLeft">
                                                                    <Option v-for="item in transList" :value="item.id"
                                                                            :key="item.id">{{ item.name }}
                                                                    </Option>
                                                                </Select>
                                                            </FormItem>
                                                        </Col>
                                                        <Col span="12">
                                                            <FormItem label="车辆类型">
                                                                <Select v-model="formLeft.vehicle_type">
                                                                    <Option value="10">客车</Option>
                                                                    <Option value="11">大型客车</Option>
                                                                    <Option value="12">中型客车</Option>
                                                                    <Option value="13">小型客车</Option>
                                                                    <Option value="14">轿车</Option>
                                                                    <Option value="15">大型卧铺客车</Option>
                                                                    <Option value="16">中型卧铺客车</Option>
                                                                    <Option value="20">普通货车</Option>
                                                                    <Option value="21">大型普通货车</Option>
                                                                    <Option value="22">中型普通货车</Option>
                                                                    <Option value="23">小型普通货车</Option>
                                                                    <Option value="30">专用运输车</Option>
                                                                    <Option value="31">集装箱车</Option>
                                                                    <Option value="32">大件运输车</Option>
                                                                    <Option value="33">保温冷藏车</Option>
                                                                    <Option value="34">商品车运输专用车辆</Option>
                                                                    <Option value="35">罐车</Option>
                                                                    <Option value="36">牵引车</Option>
                                                                    <Option value="37">挂车</Option>
                                                                    <Option value="38">平板车</Option>
                                                                    <Option value="39">其他专用车</Option>
                                                                    <Option value="40">危险品运输车</Option>
                                                                    <Option value="50">农用车</Option>
                                                                    <Option value="60">拖拉机</Option>
                                                                    <Option value="61">轮式拖拉机</Option>
                                                                    <Option value="62">手扶拖拉机</Option>
                                                                    <Option value="63">履带拖拉机</Option>
                                                                    <Option value="64">特种拖拉机</Option>
                                                                    <Option value="90">其它车辆</Option>
                                                                </Select>
                                                            </FormItem>
                                                        </Col>
                                                    </Row>
                                                    <Row :gutter=20>
                                                        <Col span="12">
                                                            <FormItem label="终端ID">
                                                                <Input v-model="formLeft.device_id"></Input>
                                                            </FormItem>
                                                        </Col>
                                                    </Row>
                                                    <Row :gutter=20>
                                                        <Col span="12">
                                                            <FormItem label="车牌号">
                                                                <Input v-model="formLeft.vehicle_no"></Input>
                                                            </FormItem>
                                                        </Col>
                                                        <Col span="12">
                                                            <FormItem label="运营状态">
                                                                <Select v-model="formLeft.status">
                                                                    <Option value="1">正常</Option>
                                                                    <Option value="2">保养</Option>
                                                                    <Option value="3">维修</Option>
                                                                    <Option value="4">包车</Option>
                                                                    <Option value="5">报停</Option>
                                                                    <Option value="6">报废</Option>
                                                                    <Option value="7">试用</Option>
                                                                </Select>
                                                            </FormItem>
                                                        </Col>
                                                    </Row>
                                                    <Row :gutter=20>
                                                        <Col span="12">
                                                            <FormItem label="车辆品牌">
                                                                <Select v-model="formLeft.brand_id">
                                                                    <Option value="5">奥铃</Option>
                                                                    <Option value="4">奥迪</Option>
                                                                    <Option value="3">奥驰</Option>
                                                                    <Option value="4">安员</Option>
                                                                    <Option value="3">安凯</Option>
                                                                </Select>
                                                            </FormItem>
                                                        </Col>
                                                        <Col span="12">
                                                            <FormItem label="车牌颜色">
                                                                <Select v-model="formLeft.plate_color">
                                                                    <Option value=4>白色</Option>
                                                                    <Option value="3">黑色</Option>
                                                                    <Option value="2">黄色</Option>
                                                                    <Option value="1">蓝色</Option>
                                                                    <Option value="9">其他</Option>
                                                                </Select>
                                                            </FormItem>
                                                        </Col>
                                                    </Row>
                                                    <Row :gutter=20>
                                                     <Col span="12">
                                                         <FormItem label="省城">
                                                         <Cascader :data="datas" v-model="value2" @on-change="cityOnChange"></Cascader>
                                                         </FormItem>
                                                       </Col>
                                                        <Col span="12">
                                                            <FormItem label="经营范围">
                                                                <Select v-model="formLeft.buss_area">
                                                                    <Option value=5>国际</Option>
                                                                    <Option value="4">省际</Option>
                                                                    <Option value="3">市际</Option>
                                                                    <Option value="1">蓝色</Option>
                                                                    <Option value="9">其他</Option>
                                                                </Select>
                                                            </FormItem>
                                                        </Col>
                                                    </Row>
                                                    <Row :gutter=20>
                                                        <Col span="12">
                                                            <FormItem label="车辆分类">
                                                                <Select v-model="formLeft.plate_type">
                                                                    <Option value=4>使馆汽车</Option>
                                                                    <Option value="3">小型汽车</Option>
                                                                    <Option value="2">挂车</Option>
                                                                    <Option value="1">大型汽车</Option>
                                                                    <Option value="5">领馆汽车</Option>
                                                                </Select>
                                                            </FormItem>
                                                        </Col>
                                                        <Col span="12">
                                                            <FormItem label="VIN号">
                                                                <Input v-model="formLeft.vin"></Input>
                                                            </FormItem>
                                                        </Col>
                                                    </Row>
                                                </template>
                                                <template>
                                                    <Upload action="//jsonplaceholder.typicode.com/posts/">
                                                        <Button icon="ios-cloud-upload-outline">文件上传
                                                        </Button>
                                                    </Upload>
                                                </template>
                                            </TabPane>
                                            <TabPane label="其他信息" name="name2">
                                                <Row :gutter=20>
                                                    <Col span="12">
                                                        <FormItem label="主驾驶">
                                                            <Select v-model="list1.driver_first">
                                                                <Option value=4>使馆汽车</Option>
                                                                <Option value="3">小型汽车</Option>
                                                                <Option value="2">挂车</Option>
                                                                <Option value="1">大型汽车</Option>
                                                                <Option value="5">领馆汽车</Option>
                                                            </Select>
                                                        </FormItem>
                                                    </Col>
                                                    <Col span="12">
                                                        <FormItem label="副驾驶">
                                                            <Select v-model="formLeft.driver_second">
                                                                <Option value=4>使馆汽车</Option>
                                                                <Option value="3">小型汽车</Option>
                                                                <Option value="2">挂车</Option>
                                                                <Option value="1">大型汽车</Option>
                                                                <Option value="5">领馆汽车</Option>
                                                            </Select>
                                                        </FormItem>
                                                    </Col>
                                                </Row>
                                                <Row :gutter=20>
                                                    <Col span="12">
                                                        <FormItem label="押运员">
                                                            <Select v-model="formLeft.driver_guard">
                                                                <Option value=4>使馆汽车</Option>
                                                                <Option value="3">小型汽车</Option>
                                                                <Option value="2">挂车</Option>
                                                                <Option value="1">大型汽车</Option>
                                                                <Option value="5">领馆汽车</Option>
                                                            </Select>
                                                        </FormItem>
                                                    </Col>
                                                </Row>
                                                <Row :gutter=20>
                                                    <Col span="12">
                                                        <FormItem label="道路运输证">
                                                            <Input v-model="formLeft.input1"
                                                                   value=""></Input>
                                                        </FormItem>
                                                    </Col>
                                                    <Col span="12">
                                                        <FormItem label="核发机关">
                                                            <Input v-model="formLeft.input1"
                                                                   value=""></Input>
                                                        </FormItem>
                                                    </Col>
                                                </Row>
                                                <Row :gutter=20>
                                                    <Col span="12">
                                                        <FormItem label="业户名称">
                                                            <Input v-model="formLeft.input1"
                                                                   value=""></Input>
                                                        </FormItem>
                                                    </Col>
                                                    <Col span="12">
                                                        <FormItem label="业户联系电话">
                                                            <Input v-model="formLeft.input1"
                                                                   value=""></Input>
                                                        </FormItem>
                                                    </Col>
                                                </Row>
                                                <Row :gutter=20>
                                                    <Col span="12">
                                                        <FormItem label="货物类型">
                                                            <Select v-model="formLeft.dg_type">
                                                                <Option value="杂项危险物质和物品">非经营性危险货物运输（9类）</Option>
                                                                <Option value="腐蚀性物质">非经营性危险货物运输（8类）</Option>
                                                                <Option value="放射性物质">非经营性危险货物运输（7类）</Option>
                                                                <Option value="感染性物质">非经营性危险货物运输（6类1项）</Option>
                                                                <Option value="有机过氧化物">非经营性危险货物运输（5类2项）</Option>
                                                                <Option value="氧化性物质">非经营性危险货物运输（5类1项)</Option>
                                                                <Option value="遇水放出易燃气体的物质">非经营性危险货物运输（4类3项）</Option>
                                                                <Option value="易于自燃的物质">非经营性危险货物运输（4类2项）</Option>
                                                                <Option value="易燃固体">非经营性危险货物运输（4类1项）</Option>
                                                                <Option value="毒性气体">非经营性危险货物运输（2类3项）</Option>
                                                                <Option value="非易燃无毒气体">非经营性危险货物运输（2类2项）</Option>
                                                                <Option value="易燃气体">非经营性危险货物运输（2类1项）</Option>
                                                                <Option value="无整体爆炸危险的极端不敏感物品">非经营性危险货物运输（1类6项）</Option>
                                                                <Option value="有整体爆炸危险的非常不敏感物质">非经营性危险货物运输（1类5项）</Option>
                                                                <Option value="不呈现重大危险的物质和物品">非经营性危险货物运输（1类4项）</Option>
                                                                <Option value="有燃烧危险并有局部爆炸危险或局部迸射危险或这两种危险都有，但无整体爆炸危险的物质和物品">非经营性危险货物运输（1类3项）</Option>
                                                                <Option value="有进射危险，但无整体爆炸的物质和物品">非经营性危险货物运输（1类2项）</Option>
                                                                <Option value="有整体爆炸危险的物质和物品">非经营性危险货物运输（1类1项）</Option>
                                                                <Option value="非经营性危险货物运输">非经营性危险货物运输</Option>
                                                                <Option value="杂项危险物质和物品">经营性危险货物运输（9类）</Option>
                                                                <Option value="腐蚀性物质">经营性危险货物运输（8类）</Option>
                                                                <Option value="放射性物质">经营性危险货物运输（7类）</Option>
                                                                <Option value="感染性物质">经营性危险货物运输（6类2项）</Option>
                                                                <Option value="毒物质和感染性物质">经营性危险货物运输（6类1项）</Option>
                                                                <Option value="有机过氧化物">经营性危险货物运输（5类2项）</Option>
                                                            </Select>
                                                        </FormItem>
                                                    </Col>
                                                    <Col span="12">
                                                        <FormItem label="班线类型">
                                                            <Select v-model="formLeft.bline_type">
                                                                <Option value=4>四类客运班线</Option>
                                                                <Option value="3">三类客运班线</Option>
                                                                <Option value="2">二类客运班线</Option>
                                                                <Option value="1">一类客运班线</Option>
                                                            </Select>
                                                        </FormItem>
                                                    </Col>
                                                </Row>
                                                <Row :gutter=20>
                                                    <Col span="12">
                                                        <FormItem label="始发地">
                                                            <Input v-model="formLeft.input1"
                                                                   value=""></Input>
                                                        </FormItem>
                                                    </Col>
                                                    <Col span="12">
                                                        <FormItem label="目的地">
                                                            <Input v-model="formLeft.input1"
                                                                   value=""></Input>
                                                        </FormItem>
                                                    </Col>
                                                </Row>
                                                <Row :gutter=20>
                                                    <Col span="12">
                                                        <FormItem label="始发站">
                                                            <Input v-model="formLeft.input1"
                                                                   value=""></Input>
                                                        </FormItem>
                                                    </Col>
                                                    <Col span="12">
                                                        <FormItem label="目的站">
                                                            <Input v-model="formLeft.input1"
                                                                   value=""></Input>
                                                        </FormItem>
                                                    </Col>
                                                </Row>
                                                <Row :gutter=20>
                                                    <Col span="12">
                                                        <FormItem label="经营许可证号">
                                                            <Input v-model="formLeft.input1"
                                                                   value=""></Input>
                                                        </FormItem>
                                                    </Col>
                                                </Row>
                                                <Row :gutter=20>
                                                    <Col span="12">
                                                        <FormItem label="驾驶员情况">
                                                            <Input v-model="formLeft.input1"
                                                                   value=""></Input>
                                                        </FormItem>
                                                    </Col>
                                                    <Col span="12">
                                                        <FormItem label="押运员情况">
                                                            <Input v-model="formLeft.input1"
                                                                   value=""></Input>
                                                        </FormItem>
                                                    </Col>
                                                </Row>
                                            </TabPane>
                                        </Tabs>
                                        <br> <u></u> <br>
                                    </template>
                                </Form>
                            </template>
                        </Modal>
                    </Col>
                </Row>
                <Row type="flex" justify="space-between" class="wl-footer">
                    <Col span="14">
                        <Button  @click="handleSelectAll(true)" class="wl-content-button">全选</Button>
                        <Button @click="handleSelectAll(false)">取消</Button>
                    </Col>
                    <Col span="10">
                        <Page :total="pageOptions.totalRecord" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
                    </Col>
                </Row>
            </template>
        </wl-content-top>
    </div>
</template>

<script>
import WlContentTop from '../../../../components/wl-content-top/wl-content-top'
import { vehicle, sel_vehicle, postvehicle } from '@/api/platform'
import { getDictData } from '@/api/dict'
export default {
  components: { WlContentTop },
  data () {
    return {
      transList: [
        /* {
          value: '1',
          label: '道路旅客运输'
        },
        {
          value: '2',
          label: '班车客运'
        },
        {
          value: '3',
          label: '包车客运'
        },
        {
          value: '4',
          label: '定线旅游'
        },
        {
          value: '5',
          label: '非定线旅游'
        },
          {
              value: '6',
              label: '道路货物运输'
          },
          {
              value: '7',
              label: '道路普通货物运输'
          },
          {
              value: '8',
              label: '货物专用运输'
          },
          {
              value: '9',
              label: '大型物件运输'
          },
          {
              value: '10',
              label: '道路危险货物运输'
          },
          {
              value: '11',
              label: '营运性危险货物运输'
          },
          {
              value: '12',
              label: '非经营性危险货物运输'
          },
          {
              value: '13',
              label: '机动车维修'
          },
          {
              value: '14',
              label: '汽车维修'
          },
          {
              value: '15',
              label: '危险货物运输车辆维修'
          },
          {
              value: '16',
              label: '摩托车维修'
          },
          {
              value: '17',
              label: '其它机动车维修'
          },
          {
              value: '18',
              label: '机动车驾驶员培训'
          },
          {
              value: '19',
              label: '普通机动车驾驶员培训'
          },
          {
              value: '20',
              label: '道路运输驾驶员从业资格培训'
          },
          {
              value: '21',
              label: '机动车驾驶员培训教练场'
          },
          {
              value: '22',
              label: '站场服务'
          },
          {
              value: '23',
              label: '道路旅客运输站'
          },
          {
              value: '24',
              label: '道路货运站(场)'
          },
          {
              value: '25',
              label: '国际道路运输'
          },
          {
              value: '26',
              label: '国际道路旅客运输'
          },
          {
              value: '27',
              label: '道路旅客运输站'
          },
          {
              value: '28',
              label: '道路旅客运输站'
          },
          {
              value: '29',
              label: '道路旅客运输站'
          } */
      ],
      value2: ['jiangsu', 'suzhou', 'zhuozhengyuan'],
      datas: [{
        value: 'beijing',
        label: '北京',
        children: [
          {
            value: 'gugong',
            label: '故宫'
          },
          {
            value: 'tiantan',
            label: '天坛'
          },
          {
            value: 'wangfujing',
            label: '王府井'
          }
        ]
      }, {
        value: 'jiangsu',
        label: '江苏',
        children: [
          {
            value: 'nanjing',
            label: '南京',
            children: [
              {
                value: 'fuzimiao',
                label: '夫子庙'
              }
            ]
          },
          {
            value: 'suzhou',
            label: '苏州',
            children: [
              {
                value: 'zhuozhengyuan',
                label: '拙政园'
              },
              {
                value: 'shizilin',
                label: '狮子林'
              }
            ]
          }
        ]
      }],
      model3: '',
      sel_info: '',
      list1: {
        driver_first: '',
        driver_second: '',
        driver_guard: '',
        dg_type: '',
        bline_type: ''
      },
      formLeft1: {
        input2: '监控中心',
        input3: '',
        no: ''
      },
      input: {
        no: ''
      },
      formLeft: {
        no: '',
        device_real_id: '',
        trans_type: '',
        sQyName: '',
        vehicle_type: '',
        vehicle_no: '',
        vin: '',
        plate_type: '',
        plate_color: '',
        brand_id: '',
        buss_area: ''
      },
      data2: [
        {
          title: '监控中心',
          expand: true,
          children: [
            {
              title: '沈阳可欣旅游汽车有限责任公司',
              expand: true,
              children: [
                {
                  title: '可欣一号'
                },
                {
                  title: '可欣二号'
                }
              ]
            },
            {
              title: '沈阳虎跃快客',
              expand: true,
              children: [
                {
                  title: '虎跃一号'
                },
                {
                  title: '虎跃二号'
                }
              ]
            }
          ]
        }
      ],
      columns4: {
        columns4Header: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '车牌号',
            slot: 'carNo'
          },
          {
            title: '终端SIM卡号',
            key: 'device_sim'
          },
          {
            title: '车牌号',
            key: 'no'
          },
          {
            title: '所属单位',
            key: 'unit_name'
          },
          {
            title: '更新时间',
            key: 'update_time'
          },
          {
            title: '车牌编号',
            key: 'vehicle_no'
          },
          {
            title: '修改所属单位',
            slot: 'action',
            width: 150,
            align: 'center'
          }
        ],
        columns4Bodey: []
      },
      //  计算总数
      pageOptions: {
        totalRecord: 0
      },
      // 传递参数：参数要全
      param: {
        page: 1,
        unit_id: 1
      },
      modal1: false,
      modal2: false,
      modal4: false
    }
  },
  // 在初始化页面时调用getlist（）
  computed: {
    treeSelectData () {
      return this.$store.state.app.treeSelectData
    }
  },
  mounted () {
    this.getList()
    this.datas = this.$store.state.app.cityData
    this.industry()
  },
  // 函数
  methods: {
    industry () {
      getDictData({ type: '8' }).then(ret => {
        console.log(ret, 1234)
        /* console.log(ret.data.data.results, 12345) */
        /*        let datas = ret.results
        let dataList = []
        for (let item in datas) {
          dataList.push({ name: datas[item] })
        } */
        /* let datas = ret.results */
        console.log(ret.results.id, 5555)
      })
    },
    cityOnChange (data) {
      // console.log(data)
    },
    update (row) {
      this.modal2 = true
      this.formLeft.no = row.no
      this.formLeft.device_real_id = row.device_real_id
      this.formLeft.city = row.city
      this.formLeft.vin = row.vin
      this.formLeft.plate_color = row.plate_color
      this.formLeft.device_status = row.device_status
      this.formLeft.unit_name = '正常'
      // console.log(row.unit_name)
    },
    addCarInfo () {
      this.modal2 = true
    },
    getList () {
      this.loading = true
      vehicle(this.param).then(ret => {
        this.loading = false
        this.columns4.columns4Bodey = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      })
    },
    pageChange (e) {
      this.param.page = e
      this.getList()
    },
    pageSizeChange (e) {
      this.param.page_size = e
      this.param.page = 1
      this.getList()
    },
    select_info (e) {
      sel_vehicle({ keyword: e, unit_id: 1 }).then(ret => {
        this.columns4.columns4Bodey = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      })
    },
    ok () {
      this.$Message.info('点击了确定')
      let data1 = {
        no: this.no,
        device_real_id: this.formLeft.device_real_id,
        trans_type: this.formLeft.trans_type,
        sQyName: this.formLeft.sQyName,
        vehicle_type: this.formLeft.vehicle_type,
        vehicle_no: this.formLeft.vehicle_no,
        vin: this.formLeft.vin,
        plate_type: this.formLeft.plate_type,
        plate_color: this.formLeft.plate_color,
        brand_id: this.formLeft.brand_id,
        buss_area: this.formLeft.buss_area,
        provience: this.value2[0],
        city: this.value2[1],
        section: this.value2[2]
      }
      postvehicle(data1).then(ret => {
        console.log(1)
      })
    },
    cancel () {
      this.$Message.info('点击了取消')
    },
    cmt () {
      vehicle().then(ret => {
        this.columns4.columns4Bodey = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      }, {
        no: this.input.no
      })
    }
  },
  watch: {
    treeSelectData (value) {
      // console.log(value, '---')
      this.param.unit_id = value.id
      this.getList()
    }
  }
}
</script>
<style scoped lang="less">
    .page{
        height: 100%;
    }
    .wl-content {
        margin-bottom: 10px;

        &-group {
            margin: 10px;
        }

        &-button {
            margin-right: 10px;
        }

    }
</style>
